<template>
    <div class="login-container">
        <div class="login-logo">
            <img class="login-logo-img" src="../assets/imgs/icon/logo.png" alt="">
            <p class="login-logo-text">Secure your digital journey</p>
        </div>
        <div class="login-form">

            <el-form ref="ruleFormRef" :model="loginForm">
                <el-form-item>
                    <el-input @focus="errorShow = false" v-model="loginForm.email" prop="email"
                        placeholder="Email Address"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input @focus="errorShow = false" v-model="loginForm.password" prop="password" show-password
                        type="password" placeholder="Password"></el-input>
                    <p v-show="errorShow" style="color: red;font-size: 12px;">email or password error,please try again .</p>
                </el-form-item>
                <el-form-item>
                    <el-button @click="login" :style="{ 'backgroundColor': validateLogin }" :disabled="isDisabled"
                        class="login-form-btn">Sign
                        in</el-button>
                </el-form-item>
            </el-form>
            <p @click="goResetPwd" class="login-forgetpwd">Forget your password?</p>
        </div>
        <div class="login-explain">
            <p>Don’t have an account?</p>
            <p @click="goToSignUp" class="login-explain-active">Singn up</p>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed, watch, onUnmounted } from 'vue';
import { useRouter } from 'vue-router'
import { userLogin } from '../apis/user.js'
import { ipcRenderer } from 'electron'
import local from '../utils/local.js'



const router = useRouter()
const ruleFormRef = ref()
const isDisabled = ref(false)
const validateLogin = ref('#ccc')
const errorShow = ref(false)
const loginForm = reactive({
    email: 'test@test.com',
    password: '123456'
})
watch(loginForm, (newVal, old) => {
    if (newVal.email === '' || newVal.password === '') {
        isDisabled.value = true
        validateLogin.value = '#ccc'

    } else {
        isDisabled.value = false
        validateLogin.value = '#107DFB'
    }
}, { deep: true })

const keyDown = (e) => {
    if (e.keyCode == 13 || e.keyCode == 100) {
        login()
    }
}
onMounted(() => {
    if (loginForm.email === '' || loginForm.password === '') {
        isDisabled.value = true
        validateLogin.value = '#ccc'
    } else {
        isDisabled.value = false
        validateLogin.value = '#107DFB'
    }
    window.addEventListener('keydown', keyDown)
})

onUnmounted(() => {
    window.removeEventListener('keydown', keyDown, false)
})
const goResetPwd = () => {
    router.push('/reset-pwd')
}
// 登录
const login = async () => {
    let res = await userLogin(loginForm)
    console.log(res, 'res_______');
    // 登录成功将token保存至本地
    if (String(res.data.code) === '0') {
        local.localSet("token", res.data.data.token)
        local.localSet("user", loginForm.email)
        setTimeout(() => {
            // 设置窗口大小
            ipcRenderer.send("window-max")
        }, 1);
        router.push('/home')
    } else if (String(res.data.code) === '500') {
        ElMessage.error('system error,please try again .')
    } else {
        // ElMessage.error('email or password error,please try again .')
        errorShow.value = true
    }
}

// 前往注册页
const goToSignUp = () => {
    ipcRenderer.send('open-sign-url', 'https://www.baidu.com')
}
</script>

<style lang="scss" scoped>
.login-container {
    width: 100%;
    height: 100%;
    background-color: #292438;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
    color: #88889D;

    .login-form {
        .el-input {
            height: 100%;
        }

        .el-button {
            height: 100%;
        }

        display: flex;
        flex-direction: column;
        align-items: center;

        .el-form-item {
            width: 332px;
            height: 56px;
        }

        .login-form-btn {
            width: 100%;
            //background-color: #107DFB;
            border: none;
            color: #fff;
            margin-top: 20px;
        }
    }


    .login-explain {
        display: flex;
        flex-direction: row;

        .login-explain-active {
            color: #107DFB;
            cursor: pointer;
        }
    }

    .login-forgetpwd {
        color: #107DFB;
        margin-top: 10px;
        cursor: pointer;
    }

    .login-logo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .login-logo-img {
            width: 60px;
            height: 60px;
        }

        .login-logo-img {
            font-size: 14px;

        }

        .login-logo-text {
            margin-top: 20px;
        }
    }
}
</style>